<template>
  <div class="detailPageCss">
    <div class="titleCss">放射卫生设备管理</div>
    <div class="bodyCss">
      <el-form ref="form" :model="formData" label-width="120px">
        <el-form-item label="许可设备类型">
          <el-select
              v-model="devType"
              placeholder="请选择许可设备类型"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.radiation_enterprise_dev_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
        </el-form-item>
        <!--
        <el-form-item label="镇/街道">
          <el-cascader
            v-model="form.town"
            :options="data2Options"
            placeholder="请选择"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.addr" placeholder="请输入"></el-input>
        </el-form-item>
        -->

        <div class="formBtnCss">
          <el-button type="primary" @click="searchBtn">查询</el-button>
          <el-button @click="resetBtn">重置</el-button>
        </div>
      </el-form>
      <div class="centerTitleCss">放射卫生诊疗设备许可设备类型范围</div>
      <div class="tableCss">
        <el-table max-height="200" :data="tableData" border style="width: 100%">
          <el-table-column prop="devType" label="许可设备类型" min-width="200">
          </el-table-column>
          <el-table-column prop="num" label="许可数量" min-width="100">
          </el-table-column>
        </el-table>
        <!--
        <el-pagination
          style="margin-top: 10px; text-align: right"
          background
          :currentPage="pageNum2"
          :pageSize="pageSize2"
          layout="prev, pager, next"
          :page-sizes="[10, 20, 50]"
          :total="total2"
          v-show="total2"
          @sizeChange="handleSizeChange1"
          @currentChange="handleCurrentChange1"
        >
        </el-pagination>
        -->

        <pagination
          v-show="total1 > 0"
          :total="total1"
          :page.sync="pageNum1"
          :limit.sync="pageSize1"
          @pagination="getList"
        />
      </div>
      <div class="centerTitleCss">设备明细</div>
      <div class="tableCss">
        <el-table
          max-height="240"
          :data="tableData2"
          border
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="55" align="center">
          </el-table-column>
          <el-table-column
            prop="enterpriseName"
            label="所属医疗机构"
            min-width="200"
          >
          </el-table-column>
          <el-table-column prop="devType" label="设备类型" min-width="100">
          </el-table-column>
          <el-table-column prop="devNumber" label="设备型号" min-width="100">
          </el-table-column>
          <el-table-column prop="devAddr" label="安装位置" min-width="200">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button
                @click="reportDetailBtn(scope.row)"
                type="text"
                size="small"
                >查看检测报告</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--
        <el-pagination
          style="margin-top: 10px; text-align: right"
          background
          :currentPage="pageNum1"
          :pageSize="pageSize1"
          layout="prev, pager, next"
          :page-sizes="[10, 20, 50]"
          :total="total1"
          v-show="total1"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"
        >
        </el-pagination>
        -->
        <pagination
          v-show="total2 > 0"
          :total="total2"
          :page.sync="pageNum2"
          :limit.sync="pageSize2"
          @pagination="getInfo"
        />
      </div>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getCascaderOptionsFun } from "@/utils/business.js";
import {
  enterpriselicensenum,
  enterprisedev,
} from "@/api/zhangping/zpEnterpriseInfo";
export default {
  dicts:['sys_user_sex','radiation_enterprise_dev_type'],
  data() {
    return {
     
      formData: {
        data1: null,
        data2: null,
      },
      devType: "",
      data2Options: [],
      tableData2: [],
      tableData: [],
      pageNum1: 1,
      pageSize1: 10,
      pageNum2: 1,
      pageSize2: 10,
      total1: 0,
      total2: 0,
      table2data3Map: {
        0: "型号名称一",
        1: "型号名称二",
        2: "型号名称三",
      },
      table1data1Map: {
        0: "X射线影像",
        1: "医用直线加速器",
        2: "螺旋断层放射治疗系统",
        3: "伽玛射线立体定向放射治疗系统",
        4: "正电子发射型磁共振成像系统",
      },
    };
  },
  mounted() {
    console.log('字典',this.dict.type.radiation_enterprise_dev_type)
    this.data2Options = getCascaderOptionsFun();
    this.getList();
    this.getInfo();
  },
  methods: {
    reportDetailBtn(row) {
      // const obj = {
      //   path: '/healthCare/zpMedicalOrg/checkSelf/detail',
      //   query: {
      //     id: '111',
      //   }
      // }
      // this.$router.push(obj);
    },
    async getList() {
      let res = await enterpriselicensenum({
        creditCode: this.$route.query.id,
        pageNum: this.pageNum1,
        pageSize: this.pageSize1,
        devType:this.devType
      });
      console.log("res", res);
      this.tableData = res.rows;
      this.total1 = res.total;
    },
    async getInfo() {
      let res = await enterprisedev({
        creditCode: this.$route.query.id,
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
      });
      console.log('res',res)
      this.tableData2 = res.rows;
      this.total2 = res.total;
      console.log('this.total2',this.total2)
    },
    handleCurrentChange() {
      console.log("handleCurrentChange");
    },
    handleSizeChange() {
      console.log("handleSizeChange");
    },
    handleSizeChange1() {
      console.log("handleSizeChange1");
    },
    handleCurrentChange1() {
      console.log("handleCurrentChange1");
    },
    resetBtn() {
      this.form = {
        enterpriseName: "",
        town: "",
        addr: "",
      };
    },
    searchBtn() {
      this.getList()
    },
    goBackBtn() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.detailPageCss {
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc(100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .titleCss {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .bodyCss {
    margin-top: 20px;
    width: calc(100% - 20px);
    margin-left: 10px;
    .centerTitleCss {
      color: #606266;
      font-weight: bold;
      font-size: 14px;
      margin-top: 20px;
    }
    .tableCss {
      margin-top: 15px;
    }
    .el-form {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #f2f2f2;
      padding-bottom: 10px;
      .formBtnCss {
        margin-left: 20px;
        text-align: center;
      }
    }
  }
  .bottomBtnCss {
    margin-top: auto;
    text-align: right;
  }
}
::v-deep .el-form-item__content {
  width: 200px;
}
</style>
